/*
    useLayoutEffect 作用: 和useEffect一模一样，只不过是它的执行时机在useEffect之前
        
*/
import { useState, useEffect, useLayoutEffect } from 'react'

function UseLayoutEffectDemo() {
    let [count, setCount] = useState(1);

    useLayoutEffect(() => {
        console.log('2 useLayoutEffect');
        return () => {
            console.log('1 useLayoutEffect之前调用');
        }
    }, [count])

    useEffect(() => {
        console.log('4 useEffect');
        return () => {
            console.log('3 useEffect之前调用');
        }
    }, [count])

    return (<div>
        {count}
        <button onClick={() => { setCount(count + 1) }}>+1</button>
    </div>)
}

export default UseLayoutEffectDemo;